<template>
  <div class="user-following-wrapper">
    <div class="user-following-title">
      <item-list :items="categoriesCover"
      :idx="categoryIdx"
      class="category-list"></item-list>
      <search-bar class="user-following-search" v-model:searchValue="searchValue"></search-bar>
    </div>

    <user-list :users="filteredFollowings" @fetchUsers="fetchFollowings"
    class="user-list"></user-list>
  </div>
</template>

<script>
import SearchBar from '@c/utils/SearchBar.vue'
import ItemList from '@c/utils/ItemList.vue'
import UserList from '@c/UserList.vue'

export default {
  components: {
    SearchBar,
    UserList,
    ItemList,
  },
  data() {
    return {
      categories: ['following'],
      categoriesCover: ['关注'],
      searching: false,
      categoryIdx: 0,
      followings: [],
      page: 0,

      searchValue: ''
    }
  },
  computed: {
    filteredFollowings() {
      return this.followings.filter(e => {
        return e.username.includes(this.searchValue);
      })
    }
  },
  watch: {
  },
  methods: {
    fetchFollowings() {
      this.$fetch({
        name: 'following users',
        method: 'POST',
        data: {
          page: ++this.page
        },
        url: '/user/following'
      }).then(res => {
        if(res.data.success) {
          if(res.data.object.length) this.followings = this.followings.concat(res.data.object);
          else this.page--;
        } else {
          this.$alert({
            type: 'error',
            content: '获取关注列表失败'
          });
          this.page--;
        }
      }).catch(error => {
        this.$alert({
          type: 'error',
          content: '获取关注列表失败'
        });
        this.page--;
      })
    }
  },
}
</script>

<style scoped lang="less">
@w: var(--innerWidthPart1);
@th: calc(var(--innerWidthPart1) * 0.065);

.user-following-wrapper {
  width: @w;

  .user-following-title {
    position: relative;
    box-sizing: border-box;
    width: @w;
    height: @th;
    padding: 0 calc(@w / 50);
    border-bottom: 1px solid var(--gray);

    .category-list {
      float: left;
      --itemListWidth: calc(@w * 0.2);
      --itemListHeight: calc(@th);
    }

    .user-following-search {
      float: right;
      --searchBarWidth: calc(@w * 0.2);
      --searchBarHeight: @th;
      --searchBarFontSize: calc(@th / 4);
      --searchBarInnerHeight: calc(@th * 0.6);
      --backgroundColor: white;

      &:focus-within {
        --searchBarWidth: calc(@w * 0.35);
      }
    }
  }

  .user-list {
    --userListWidth: @w;
  }
}
</style>